import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './index.css'

export default class List extends Component {

    state = { //初始化状态
        users:[],  //users初始值为数组
        isFirst:true,   //标识是否第一次打开页面
        isLoading:false,//标识是否在加载中
        error:''  //存储请求的错误信息
    }
    componentDidMount(){
        PubSub.subscribe('updateState',(_,stateObj)=>{
            this.setState(stateObj)
        })
    }

    render() {
        const {users,isFirst,isLoading,err} = this.state
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎欢迎，输入用户点击搜索</h2> :
                    isLoading ? <h2>Loading......</h2> :
                    err ? <h2 style={{color:'red'}}>{err}</h2> :
                    users.map((usersObj)=>{
                        return(
                            <div key={usersObj.id} className="card">
                                <a rel="noreferrer" href={usersObj.html_url} target="_blank">
                                    <img alt='' src={usersObj.avatar_url} style={{width: '100px'}}/>
                                </a>
                                <p className="card-text">{usersObj.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
